<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 300px;
				height: 300px;
				border: 1px solid grey;
				padding-left: 10px;
				margin: 5px;
			}
			
			ul{
				width: 200px;
				height: 200px;
				border: 1px solid grey;
				padding-left: 10px;
			}
			
			ul li{
				width: 100px;
				height: 100px;
				border: 1px solid grey;
				list-style: none;
				padding-left: 10px;
			}
			
			ul li span{
				background: green;
			}
			
			
		</style>
		<script src="js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<div>div (曾祖父)
			<ul>ul (祖父)
				<li>li (父亲)
					<span>span</span>
				</li>
			</ul>
		</div>
		
		
		<script>
			$(function(){
				// $("span").parent().css("border","2px solid purple");
				// $("span").parents().css("border","2px solid purple");
				// $("span").parents("div").css("border","2px solid purple");
				$("span").parentsUntil("div").css("border","2px solid purple");
			});
		</script>
	</body>
</html>
